<template>
  <div class="deal_page">
    <DealHeader />
    <div class="deal_content page_tab_bar">
      <!-- 数据展示 -->
      <div class="deal_data">
        <!-- 左 数据 -->
        <div class="left">
          <LeftData />
        </div>
        <!-- 右 操作 -->
        <div class="right">
          <RightOrder />
        </div>
      </div>
      <!-- 委托列表 tab头部 -->
      <ul class="tab_header">
        <li
          v-for="(item, index) in tabList"
          :key="index"
          @click="changeTab(index)"
        >
          <span :class="{ actived: curHeaderIndex == index }">{{
            item.text
          }}</span>
          <span v-if="curHeaderIndex == index">({{ item.num }})</span>
          <div :class="{ border_bottom: curHeaderIndex == index }"></div>
        </li>
      </ul>
      <!-- 委托列表 tab内容 -->
      <ul class="tab_content">
        <!-- 当前委托 -->
        <li
          class="cur"
          v-if="curHeaderIndex == 0"
          v-for="(item, index) in curEntrustList"
          :key="index"
        >
          <div class="title">
            <span class="add_text">买入</span>
            <span>ETH/USDT</span>
          </div>
          <div class="top">
            <div>
              <p>{{ item.price }}</p>
              <p>委托价</p>
            </div>
            <div>
              <p>{{ item.quantity }}</p>
              <p>委托量</p>
            </div>
            <div>
              <p class="add_text">{{ item.opt }}</p>
              <p>操作</p>
            </div>
          </div>
          <div class="bot">
            <div>
              <p>{{ item.deal }}</p>
              <p>已成交量</p>
            </div>
            <div>
              <p>{{ item.avePrice }}</p>
              <p>时间均价</p>
            </div>
            <div>
              <p>{{ item.time }}</p>
              <p>时间</p>
            </div>
          </div>
        </li>
        <!-- 历史委托 -->
        <li
          class="his font_color"
          v-if="curHeaderIndex == 1"
          v-for="(item, index) in historyEntrustList"
          :key="index"
        >
          <div class="one">
            <div>
              <p class="cut_text">{{ item.opt }}</p>
              <p>{{ item.time }}</p>
            </div>
            <div class="r">
              <p>
                <span>状态：</span>
                <span class="add_text">{{ item.status }}</span>
              </p>
            </div>
          </div>
          <div class="two">
            <p>
              <span>委托价：</span>
              <span>{{ item.entrustPri }}</span>
            </p>
            <p>
              <span>委托量：</span>
              <span>{{ item.quntity }}</span>
            </p>
          </div>
          <div class="three">
            <p>
              <span>成交数量：</span>
              <span>{{ item.deal }}</span>
            </p>
            <p>
              <span>成交均价：</span>
              <span>{{ item.ave }}</span>
            </p>
          </div>
          <div class="four">
            <p>
              <span>成交金额：</span>
              <span>{{ item.amount }}</span>
            </p>
            <p>
              <span>手续费：</span>
              <span>{{ item.fee }}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import DealHeader from "./components/DealHeader.vue";
import LeftData from "./components/LeftData.vue";
import RightOrder from "./components/RightOrder.vue";

// 当前高亮 tab
const curHeaderIndex = ref(0);

// 委托tab头部列表
const tabList = ref([
  { text: "当前委托", num: 0 },
  { text: "历史委托", num: 0 },
]);
// 当前委托列表
const curEntrustList = ref([
  {
    price: 25000,
    quantity: 1000,
    deal: 0,
    avePrice: 0,
    time: "2025/08/05 10:45:10",
    opt: "撤单",
  },
]);

// 历史委托列表
const historyEntrustList = ref([
  {
    opt: "卖出",
    status: "已完成",
    entrustPri: "00000",
    quntity: "00000",
    deal: "00000",
    ave: "00000",
    amount: "00000",
    fee: "00000",
    time: "2025/08/05 10:45:10",
  },
]);

// 切换 tab
const changeTab = (index: number) => {
  curHeaderIndex.value = index;
};
</script>

<style lang="scss" scoped>
.deal_page {
  .deal_content {
    padding-top: 10px;
    .deal_data {
      display: flex;
      div {
        flex: 1;
      }
    }
    .tab_header {
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      color: #babcbf;
      li {
        position: relative;
        margin-right: 30px;
        .actived {
          color: #ffffff;
        }
        .border_bottom {
          position: absolute;
          top: 28px;
          left: 50%;
          transform: translateX(-50%);
          width: 60px;
          height: 3px;
          background: linear-gradient(to right, #14da62, #0d5eae);
        }
      }
    }
    .tab_content {
      padding: 0 5px;
      li {
        & > div {
          margin-bottom: 10px;
        }
        .title {
          span {
            margin-right: 10px;
          }
        }
        .top,
        .bot {
          display: flex;
          justify-content: space-between;
          div {
            & > p:last-child {
              font-size: 14px;
              color: #babcbf;
            }
          }
          & > div:nth-child(1),
          & > div:nth-child(2) {
            width: 25%;
          }
          & > div:last-child {
            flex: 1;
            text-align: right;
            margin-left: 5px;
          }
        }

        .one {
          align-items: center;
          div {
            flex: 1;
          }
          div:first-child {
            margin-right: 50px;
          }
        }
      }
      .his {
        & > div {
          display: flex;
          justify-content: space-between;
          p {
            flex: 1;
          }
          p:first-child {
            margin-right: 50px;
          }
        }
      }
    }
  }
}
</style>
